<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>待办详情</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }

      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }

      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }

      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }

      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }

      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }

      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }

      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }

      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }

      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }

      .mui-pull-top-canvas canvas {
        width: 40px;
      }

      .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      }

      .silder-wrap {
        height: 60px;
      }

      .mui-fullscreen .mui-segmented-control~.mui-slider-group {
        top: 60px;
      }

      .mui-segmented-control .mui-control-item {
        line-height: 60px;
      }

      .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #3188FE;
        position: relative;
      }

      .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #3188FE;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      .mui-card {
        border-radius: 5px;
        box-shadow: none;
      }

      .lists {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
      }

      .lists li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #F5F6F7;
        border: solid 1px #C2CFDA;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
      }

      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }

      .lists li .right_name {
        color: #333333;
        float: right;
      }

      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }

      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      }

      .muileft {
        width: 200px;
      }

      .mui-card-footer:before,
      .mui-card-header:after {
        right: 15px;
        left: 15px;
      }
      .mui-scroll-wrapper{
        overflow-y:scroll
      }
      .header_card {
        padding: 15px 15px 0 15px;
        text-align: center;
      }

      .header_card p {
        color: #3188FE;
      }

      .times {
        border-bottom: dotted 1px #C2CFDA;
        padding-bottom: 15px;
      }

      .fixed-btn {
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 999;
      }
      
      .z_c {
        background-color: #3188FE !important;
        color: #fff !important;
      }

      .w_z {
        background-color: #fff;
      }

      .y_c {
        background-color: #f70000 !important;
        color: #fff !important;
      }

      .t_h {
        background-color: #5e5e5e !important;
        color: #fff !important;
      }

      .q_x {
        background-color: #d9c126 !important;
        color: #fff !important;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">待办详情</h1>
      </header>
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <div id="scroll" class="regular-scroll mui-scroll-wrapper" style="margin-bottom: 80px;">
                <div class="mui-scroll">
                  <div>
                    <div class="mui-card card_content" v-cloak>
                      <div class="header_card" v-if="startDate&&endDate">
                        <p>工作票时间</p>
                        <p class="times">{{startDate}} - {{endDate}}</p>
                      </div>
                      <div class="header_card" v-else>
                        <img src="../img/gongzuopiao_weikai.png" style="width: 60px;" />
                        <div class="color-999 margin-top-xs">工作票未开</div>
                      </div>
                      <div class="mui-card-header">
                        <span class="muileft">敏感设备</span>
                        <!-- <a class="mui-navigate-right btntxt">进入</a> -->
                      </div>
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          <li class="lis" v-for="(item,index) in fxList" :key="item.id" :class="statusBg(item)" @tap="toSensitive(item,item.index)">
                            {{item.index+1}}</li>

                        </ul>
                      </div>
                      <div class="mui-card-header">
                        <span class="muileft">工序</span>
                        <!-- <a class="mui-navigate-right btntxt">进入</a> -->
                      </div>
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          <li class="lis" v-for="(item,index) in gxList" :key="item.id" :class="statusBg(item)"  @tap="toWorking(item,item.index)">
                            {{item.index+1}}</li>

                        </ul>
                      </div>

                      <!--<div class="mui-card-footer">
                        <div class="foots">
                          <div class="padding-tb border-bottom">
                            <div class="flex justify-between" style="position: relative;">
                              <div>验收结论</div>
                            </div>
                            <div class="flex margin-top-sm">
                              <div class="mui-input-row mui-radio mui-left">
                                <label>通过</label>
                                <input v-model="isPass" value="1" name="radio1" type="radio">
                              </div>
                              <div class="mui-input-row mui-radio mui-left">
                                <label>不通过</label>
                                <input v-model="isPass" value="0" name="radio1" type="radio">
                              </div>
                            </div>
                          </div>
                          <div style="padding: 10px 0;">
                            <span class="navigate-right">验收意见</span>
                          </div>
                          <div>
                            <textarea name="" id="conclusions" v-model="conclusions" cols="30" rows="3"></textarea>
                          </div>
                        </div>
                      </div>-->
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!--<div class="fixed-btn">
        <button type="button" class="mui-btn mui-btn-primary" @tap="submits">提交</button>
      </div>-->
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var size = 15;
      var page = 1;
      var donePage = 1;
      var ids = 0;
      var userId = 0;
      var self = null
      if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        self = plus.webview.currentWebview();
        console.log('idssss', self.projectTaskId)
        ids = self.projectTaskId
        userId = self.userId
        getProject()
        getTaskList()
      }
      // mui.plusReady(function() {
      //   getProject(page)
      //   getTaskList(donePage)
      // })
      var vm = new Vue({
        el: '#container',
        data: {
          taskList: [],
          gxList: [],
          fxList: [],
          startDate: null,
          endDate: null,
          conclusions: '',
          isPass: 1,
        },
        computed: {
          statusBg() {
            return function(item) {
              // 蓝色为正常执行，白色为未执行，红色为异常执行，灰色为退回，黄色为缺陷
              // 状态 0:未开始 1: 进行中 2:整改中 3:已完成 4: 验收
              // if(!item.isAnomalyrn){
              //   return 'z_c'
              // } 
              // if(!item.isPass){
              //   return 'w_z'
              // }
              //  if(item.isAnomalyrn){
              //   return 'y_c'
              // }
              //  if(item.isReturn){
              //   return 't_h'
              // }
              //  if(item.isFault){
              //   return 'q_x'
              // }
              return {
                z_c: item.status == 4 ? true : false,
                y_c: item.isAnomalyrn ? true : false,
                t_h: item.isReturn ? true : false,
                q_x: item.isFault ? true : false,
              }
            }
          }
        },
        created: function() {
          // getProject()
          //        getTaskList(donePage)
        },
        methods: {
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          submits() {
            if (this.isPass != 1 && !this.conclusions) {
              mui.toast("请填写验收意见")
              return
            }
            plus.nativeUI.showWaiting('加载中...');
            mui.baseApp.httpRequst("post", "/app/api/project/execution/checkOpinion", {
              stage: 4,
              projectTaskId: ids,
              opinion: this.conclusions,
              isPass: this.isPass,
              userId: userId,
            }, function(data) {
              console.log(data)
              plus.nativeUI.closeWaiting();
              mui.toast(data.msg)
              mui.fire(self.opener(), 'back', {
                back: 1
              })
              mui.back()
            }, function() {
              plus.nativeUI.closeWaiting()
              console.log("获取数据失败");
            })
          },
          toSensitive(item, index) {
            mui.baseApp.openWindow('./groupImplement.html', {
              projectTaskId: item.id,
              projectCategory: 1,
              aList: this.fxList,
              idxs: index
            })
          },
          toWorking(item, index) {
            mui.baseApp.openWindow('./groupWorkingCode.html', {
              projectTaskId: item.id,
              tagId: item.tagId,
              projectCategory: 1,
              aList: this.gxList,
              idxs: index
            })
          },
          // toRiskList(){
          //    mui.baseApp.openWindow('./groupRiskList.html',{projectTaskId: ids})
          // },
          // toWorkList(){
          //    mui.baseApp.openWindow('./groupWorkingList.html',{projectTaskId: ids})
          // },

        }
      });

      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration
        });

      })(mui);

      function getProject() {
        // if(page === 1) {
        //   // plus.nativeUI.showWaiting('加载中...');
        // }
        plus.nativeUI.showWaiting('加载中...');
        mui.baseApp.httpRequst("get", "/app/api/task/wpAndSensitive", {
          projectTaskId: ids,
          userId: userId,
        }, function(data) {
          console.log(data)
          plus.nativeUI.closeWaiting();
          vm.gxList = data.l
          vm.fxList = data.s
          vm.gxList.forEach((res, index) => {
            res.index = index
          })
          vm.fxList.forEach((res, index) => {
            res.index = index
          })

        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      // 获取任务工作票
      function getTaskList() {
        // if(page === 1) {
        //   plus.nativeUI.showWaiting('加载中...');
        // }
        plus.nativeUI.showWaiting('加载中...');
        mui.baseApp.httpRequst("get", "/app/api/project/execution/workTicket", {
          projectTaskId: ids,
          stage: 4
        }, function(data) {
          plus.nativeUI.closeWaiting();
          console.log('工作票', data)
          vm.startDate = data.data.startDate
          vm.endDate = data.data.endDate
          // vm.taskList = vm.taskList.concat(data.records)

        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e.detail.slideNumber);

      });
    </script>
  </body>

</html>
